<template>
  <div>
    <p><button type="button" @click="logUser">打印信息</button></p>
    <p>姓名： <input type="text" v-model="userInfo.name" /></p>
    <p>
      性别：
      <input type="radio" value="男" v-model="userInfo.sex" /> 男
      <input type="radio" value="女" v-model="userInfo.sex" /> 女
    </p>
    <p>
      爱好：
      <input type="checkbox" value="打游戏" v-model="userInfo.hoddy" /> 打游戏
      <input type="checkbox" value="打豆豆" v-model="userInfo.hoddy" /> 打豆豆
      <input type="checkbox" value="敲代码" v-model="userInfo.hoddy" /> 敲代码
    </p>
    <p>
      地址：
      <select v-model="userInfo.address">
        <option value="成都">成都</option>
        <option value="重庆">重庆</option>
        <option value="上海">上海</option>
        <option value="北京">北京</option>
      </select>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '',
        sex: '男',
        hoddy: [],
        address: ''
      }
    }
  },
  methods: {
    logUser() {
      console.log(this.userInfo)
    }
  }
}
</script>

<style lang="less" scoped></style>
